<template>
    <ph-list-item class="ph-dropdown-item" ref="edom" @click="onSelect" :active="active" :icon="iconComputed">
        <span><slot></slot></span>
    </ph-list-item>
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, Ref, ref} from 'vue'
import {PhListItem} from 'ph-list'
export default defineComponent({
    name:"PhOption",
    components:{
        PhListItem
    },
    props:{
        value:{type:[String,Number],default:""},
        icon:String
    },
    setup(props) {
        const update = inject("update",Function,true)
        const addOption = inject("addOption",Function,true)
        const cvalue = inject("cvalue") as Ref<Array<string|number>>
        const multiple = inject<Ref<boolean>>("multiple")
        const edom = ref<InstanceType<typeof PhListItem>>()
        const active = computed(()=>{
            return cvalue?.value.includes(props.value)
        })
        const iconComputed = computed(()=>{
            return multiple?.value?(active.value?'check-square':'square-o'):props.icon
        })
        const onSelect = (e:Event)=>{
            const target = e.target as HTMLElement
            update({
                value:props.value,
                selected:multiple?.value?!active.value:true,
                text:target.innerText
            })
        }
        onMounted(()=>{
            addOption({
                value:props.value,
                text:edom?.value?.getText()
            })
        })
        return {active,onSelect,edom,multiple,iconComputed}
    },
})
</script>
